<template>
    <scroll-view scroll-y class="content-right">
        <view class="content-right-item" v-for="(item) in list" :key="item.id">
            <image :src="'http://10.10.32.78:8081/common/download?name=' + item.image" class="img" />
            <view class="flex flex-col ml-12">
                <text class="txt-black-50 txt-26">{{ item.name }}</text>
                <text class="txt-black-153 txt-22 txt-ellipsis my-10" style="width:300rpx">{{ item.description
                    }}</text>
                <text class="txt-black-153 txt-22">月销：{{monthSales}}</text>
                <view class="flex ai-center jc-between mt-10">
                    <text class="txt-red-233 txt-22">￥{{item.price / 100}}</text>
                    <AddDish  :item="item" />
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script setup>
import AddDish from './add-dish.vue';
defineProps({
    list: {
        type: Array,
        default: () => []
    }
})
</script>

<style lang="scss" scoped>
.content-right {
    padding-top: 80rpx;
    width: calc(100vw - 164rpx);
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;
    overflow: hidden;

    &-item {
        margin-bottom: 16rpx;
        display: flex;
        flex-direction: row;

        &:last-child {
            padding-bottom: 120rpx;
        }

        .img {
            width: 172rpx; //86
            height: 172rpx; //86
            overflow: hidden;
            border-radius: 16rpx;
            object-fit: cover;
        }
    }
}
</style>